<template>
	<view>
		<!-- <cmd-nav-bar back title="修改密码"></cmd-nav-bar> -->
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view class="modify">
					<view class="modify-password"><cmd-input v-model="mobile.oldPwd" type="password" displayable maxlength="26" placeholder="请输入旧密码"></cmd-input></view>
					<view class="modify-password"><cmd-input v-model="mobile.passwordOne" type="password" displayable maxlength="26" placeholder="请输入新密码"></cmd-input></view>
					<view class="modify-password"><cmd-input v-model="mobile.passwordTwo" type="password" maxlength="26" placeholder="请再次确认新密码"></cmd-input></view>
					<button class="btn-modify" :class="modifyMobile ? 'btn-modify-active' : ''" :disabled="!modifyMobile" hover-class="btn-modify-hover" @tap="fnModify">
						提交
					</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
import cmdNavBar from '@/components/cmd-nav-bar/cmd-nav-bar.vue';
import cmdPageBody from '@/components/cmd-page-body/cmd-page-body.vue';
import cmdTransition from '@/components/cmd-transition/cmd-transition.vue';
import cmdInput from '@/components/cmd-input/cmd-input.vue';

export default {
	components: {
		cmdNavBar,
		cmdPageBody,
		cmdTransition,
		cmdInput
	},

	data() {
		return {
			mobile: {
				// phone: '',
				oldPwd: '',
				passwordOne: '',
				passwordTwo: ''
			},
			passwordReg: /^\w+$/,
			phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
			safety: {
				time: 60,
				state: false,
				interval: ''
			},
			modifyMobile: false
		};
	},

	watch: {
		/**
		 * 监听表单数值
		 */
		mobile: {
			handler(newValue) {
				if (newValue.passwordOne == newValue.passwordTwo) {
					this.modifyMobile = true;
				} else {
					this.modifyMobile = false;
				}
			},
			deep: true
		}
	},

	methods: {
		/**
		 * 提交按钮点击执行修改密码
		 */
		fnModify() {
			// let _this=this
			console.log(JSON.stringify(this.mobile));
			// console.log(this.mobile.oldPwd)
			// var npw=this.mobile.passwordTwo
			// var opw=this.mobile.oldPwd
			this.$myrequest({
				url: '/sys/user/pwd',
				method: 'PUT',
				data: {
					newPwd: this.mobile.passwordTwo,
					oldPwd: this.mobile.oldPwd
				}
			}).then(res => {
				//跳转页面 当首页含有tarbar的时候使用下面方式跳转
				uni.setStorageSync('authorization', '');
				uni.setStorageSync('userInfo', '');
				uni.navigateTo({
					url: '/pages/login/login'
				});
				uni.showToast({
					title: '密码已修改，请重新登录'
				});
			});
		}
		/**
		 * 获取验证码
		 */
		// fnGetPhoneCode() {
		//   if (this.phoneReg.test(this.mobile.phone)) {
		//     uni.showToast({
		//       title: "正在发送验证码",
		//       icon: "loading",
		//       success: () => {
		//         // 成功后显示倒计时60s后可在点击
		//         this.safety.state = true;
		//         // 倒计时
		//         this.safety.interval = setInterval(() => {
		//           if (this.safety.time-- <= 0) {
		//             this.safety.time = 60;
		//             this.safety.state = false;
		//             clearInterval(this.safety.interval);
		//           }
		//         }, 1000);
		//         uni.showToast({
		//           title: "发送成功",
		//           icon: "success"
		//         })
		//       }
		//     })
		//   } else {
		//     uni.showToast({
		//       title: "手机号不正确",
		//       icon: "none"
		//     })
		//   }
		// }
	},

	beforeDestroy() {
		/**
		 * 关闭页面清除轮询器
		 */
		clearInterval(this.safety.interval);
	}
};
</script>

<style>
.modify {
	margin-top: 118upx;
	margin-right: 72upx;
	margin-left: 72upx;
}

.modify-phone {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2upx #dedede solid;
	margin-top: 118upx;
	margin-bottom: 40upx;
}

.modify-phone-getcode {
	color: #3f51b5;
	text-align: center;
	min-width: 140upx;
}

.modify-password,
.modify-code {
	margin-bottom: 40upx;
	border-bottom: 2upx #dedede solid;
}

.btn-modify {
	margin-top: 100upx;
	border-radius: 50upx;
	font-size: 16px;
	color: #fff;
	background: linear-gradient(to right, #eff2ff, #eeeeee);
}

.btn-modify-active {
	background: linear-gradient(to right, #22aa0e, #00ff7f);
}

.btn-modify-hover {
	background: linear-gradient(to right, #00aa00, #00ff7f);
}

button[disabled] {
	color: #fff;
}
</style>
